<template>
  <div
    ref="panelItem"
    :class="{'horizontal-panel-item':mode==='horizontal', 'vertical-panel-item':mode!=='horizontal'}"
    :style="bgColorStyle"
    @mouseover="hoverState = true"
    @mouseout="hoverState = false"
    @click="onClick"
  >
    <div class="one">
      <i v-if="data.icon" :class="`fa fa-${data.icon}`" />
      <i v-if="data.iconEle" :class="`el-icon-${data.iconEle}`" />
      <svg-icon v-if="data.iconSvg" :icon-class="data.iconSvg" />
      &nbsp; {{ data.title }}
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    mode: {
      type: String,
      required: false,
      default: 'horizontal' // horizontal 或 vertical
    },
    data: {
      type: Object,
      required: true,
      name: {
        type: String,
        required: true
      },
      title: {
        type: String,
        required: false,
        default: '未命名'
      },
      icon: {
        type: String,
        required: false,
        default: ''
      },
      iconEle: {
        type: String,
        required: false,
        default: ''
      },
      iconSvg: {
        type: String,
        required: false,
        default: ''
      },
      state: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    background: {
      type: Object,
      required: true,
      active: {
        type: String,
        required: false,
        default: 'transparent'
      },
      hover: {
        type: String,
        required: false,
        default: 'transparent'
      }
    }
  },
  data() {
    return {
      // 正在使用
      actualState: false,
      hoverState: false,
      bgStyle: {
        active: {
          backgroundColor: this.background.active
          // border: '0.5px solid gray'
        },
        hover: {
          backgroundColor: this.background.hover
          // border: '0.5px solid transparent'
        },
        unActive: {
          backgroundColor: 'transparent'
          // border: '0.5px solid transparent'
        }
      }
    }
  },
  computed: {
    bgColorStyle() {
      if (this.actualState) return this.bgStyle.active
      else if (this.hoverState) return this.bgStyle.hover
      else return this.bgStyle.unActive
    }
  },
  created() {
    this.actualState = this.data.state
  },
  mounted() {
    // 触发初始化消息
    this.$emit('stateInit', this.data)
  },
  methods: {
    toggleState() {
      this.actualState = !this.actualState
    },
    onToggleState(state) {
      const { name, title } = this.data
      // 返回数据给父组件
      this.$emit('stateWillChange', {
        name,
        title,
        state,
        // 传递面板状态处理函数给父组件!!!
        toggleState: this.toggleState
      })
    },
    onClick() {
      this.onToggleState(!this.actualState)
    }
  }
}
</script>

<style lang="scss" scoped>
.horizontal-panel-item {
  margin: 0 1px;
  padding: 0 6px;
  border: none;
  .one {
    font-size: 12px;
    cursor: default; // 面板上文字鼠标显示为箭头,而非竖线光标
  }
}

.vertical-panel-item {
  width: 100%;
  height: 100%;
  border: none;
  .one {
    // 参考: 竖排文字
    // https://blog.csdn.net/sangjinchao/article/details/60139706
    // color: #c6ccdb;
    // background-color: gray;
    margin: auto;
    padding: 15px 0;
    width: 15px;
    line-height: 16px;
    font-size: 12px;
    word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/
    word-break: break-all;
    cursor: default; // 面板上文字鼠标显示为箭头,而非竖线光标
  }
}
</style>
